<template>
  <div class="channel">
    <van-tabs v-model="active" @click='changeFn'>
      <van-tab :title="item.name" v-for="(item) in brotherCategory" :key="item.id">
        <h3>{{item.name}}</h3>
        <h4>{{item.front_desc}}</h4>
        <!-- 产品 -->
        <ul>
          <li v-for="item1 in goodsList" :key="item1.id" @click='goDetail(item1)'>
              <img v-lazy="item1.list_pic_url" alt="">
              <p>{{item1.name}}</p>
              <span>{{item1.retail_price|formatMoney }}  </span>
          </li>
        </ul>
      </van-tab>
      
    </van-tabs>
  </div>
</template>

<script>
import { CategoryData, searchGoods } from "@/utils/http";
export default {
  name: "",
  props: [""],
  data() {
    return {
      active:0,//选中下标
      brotherCategory:[],//分类数组
      currentCategory:[],
      page:1,
      goodsList:[],//商品列表
    };
  },

  components: {},

  computed: {},

  created() {
    //获取列表数据
    CategoryData({id:this.$route.query.id}).then((res) => {
      // console.log(res);
      this.brotherCategory=res.data.brotherCategory;
      this.currentCategory=res.data.currentCategory;
      this.id=this.currentCategory.id;
      this.brotherCategory.forEach((item,index) => {
        // console.log(item,idex);
        if(this.$route.query.id==item.id){
          this.active= index;
          // console.log(index);
        }
      });
      //重新获取数据
      this.getData(this.id)
    })
  },

  mounted() {},

  methods: {
    //列表选择
    changeFn(title,name){
      this.active=title;
      this.name=name;
      this.brotherCategory.forEach((item)=>{
        // console.log(item);
        if(item.name==name){
          this.id=item.id
        }
      })
       //重新获取数据
       this.getData(this.id)
    },
    //获取产品数据
    getData(id){
      searchGoods({
        page:this.page,
        size:this.size,//每页条数
        categoryId:id,//商品id
      }).then(res=>{
        // console.log(res);
        this.goodsList=res.data.goodsList
        // console.log(this.goodsList);
      }).catch(e=>{

      })

      
    },
    //跳转详情页
    goDetail(item1){
      this.$router.push({'path':'/productDetail',query:{id:item1.id}})
    }
  },
};
</script>
<style lang='less' scoped>
.channel{
  text-align: center;
  h3{
    height: 50px;
    font-size: 17px;
    line-height: 50px;
  }
  h4{
    height: 30px;
    line-height: 10px;
    color: gray;
    font-size: 17px;
    margin-bottom: 10px;
  }
  ul{
    display: flex;
    flex-wrap: wrap;
    li{
      width: 50%;
      img{
        width: 100%;
        display: block;
      }
      p{
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      span{
        color: darkred;
        font-size: 16px;
      }
    }
  }
}
</style>